import React, {useState, FC, useEffect} from 'react'
import {
  setTheme
} from '@/utils'
import './style.scss'

const Logo: FC<{
  width?: number,
  height?: number,
  setShow?: () => void,
  rotate?: boolean
}> = props => {
  let {
    width = 140,
    height = 140,
    setShow,
    rotate = false
  } = props
  let isRotate = ''
  if (!rotate) isRotate = 'taiji-rotate'
  return (
    <div id={'taiji'} style={{width, height}} onClick={() => setShow?.()} className={isRotate}>
      <div className={'yin'}>
        <div className={'body'}>
          <div className={'pointer'} onClick={(e) => {
            e.stopPropagation()
            setTheme('dark')
          }}>
          </div>
        </div>
      </div>
      <div className={'yang'}>
        <div className={'body'}>
          <div className={'pointer'} onClick={(e) => {
            e.stopPropagation()
            setTheme('light')
          }}>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Logo
